<?php 
$error_json = '';
	//Si hay un archivo de datos
	if(isset ($_FILES["datafile"])){
		$json_data = file_get_contents($_FILES["datafile"]["tmp_name"]);
		$test = json_decode($json_data);
		if(json_last_error()){ 
			$json_data = '';
			$error_json = '(' . json_last_error() . ') EL fichero seleccionado no contiene datos Json válidos';
		}
	}elseif(isset($_POST['jsonData'])){
		header('Content-Disposition: attachment; filename="jprules.inc"');
		echo $_POST['jsonData'];
		exit;
	}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Configurador de reglas de validación</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="config_functions.js"></script>
<!--  Esto debe ir siempre después de la llamada a config_functions -->
<script type="text/javascript">
	
<?php if($json_data != '') echo 'var data = '.$json_data; ?>

	$(document).ready(function() {
		$('.dialog').dialog({
			autoOpen : false,
			width : "auto",
			height : "auto"
		});
	});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
<link rel="stylesheet" type="text/css" media="screen" href="custom-theme/jquery-ui-1.8.21.custom.css" />
</head>
<body id="mainrulesconfig" onload="loadFields(); loadRules(); loadForms();<? if($json_data != '') echo '$(\'.seleccionFichero\').hide(); $(\'.menus\').show();'; ?>">
	<div class="seleccionFichero" style="margin: 20px; padding: 10px; text-align: center; border: 1px solid #666;">
		<b>Puede cargar su fichero de datos o empezar uno nuevo.</b> <br /> <br /> <br /> <span style="color: red;"><?php echo $error_json; ?></span> <br /> <br /> <br /> <span style="margin-right: 180px;">Puede seleccionar un fichero de reglas ya
			existente</span><br />
		<form name="loadfile" id="loadfile" action="" method="POST" enctype="multipart/form-data">
			<input type="file" name="datafile" style="width: 450px; margin-right: 15px;" onchange="$('#loadfile').submit();">
		</form>
		<?php  echo $error_json; ?>
		<br /> <br /> <br /> Para empezar un nuevo fichero desde 0 haga click en crear nuevo. <input style="margin-left: 15px;" type="button" class="boton" value="Crear nuevo fichero" onclick="$('.seleccionFichero').hide(); $('.menus').show();" />
	</div>
	<div class="menus" style="display: none; margin-top: 30px;">
		<span class="titulo">Propiedades campos<input style="margin-left: 100px;" type="button" class="boton" value="Nuevo campo" onclick="editarCampo(false);" /> <a style="cursor:pointer;" class="ayuda"
			onclick="alert('En este menú puede configurar los nombres de los campos.\n\nEl nombre debe coincidir con el atributo name del campo que se validará.');"
		>[?]</a></span><br />
		<table width="100%" id="tablaNombres" class="tablaNormal" cellspacing="0" border="0" align="center" cellmargin="0" style="padding: 25px 25px 0 0; color: #606060; font-size: 10pt; text-decoration: none; table-layout: fixed;">
			<thead>
				<tr class="cabeceraTabla" style="height: 30px;">
					<td style="padding-left: 5px;" width="60">Opc</td>
					<td width="80">Nombre</td>
					<td align="center">Reglas</td>
					<td align="center" width="80">Longitud</td>
					<td align="center" width="150">Valor</td>
					<td align="center" width="350">Html</td>
					<td align="center" width="200">Php</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<br /> <br /> <span class="titulo">Reglas de validación <input style="margin-left: 100px;" type="button" class="boton" value="Nueva regla" onclick="editarRegla(false);" /> <a style="cursor:pointer;" class="ayuda"
			onclick="alert('En este menú puede configurar reglas que después podrá seleccionar para aplicar a los campos.');"
		>[?]</a></span><br />
		<table width="100%" id="tablaReglas" class="tablaNormal" cellspacing="0" border="0" align="center" cellmargin="0" style="padding: 25px 25px 0 0; color: #606060; font-size: 10pt; text-decoration: none; table-layout: fixed;">
			<thead>
				<tr class="cabeceraTabla" style="height: 30px;">
					<td style="padding-left: 5px;" width="60">Opc.</td>
					<td width="150">Nombre</td>
					<td align="center">RegExp</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<br /> <br /> <span class="titulo">Formularios requeridos <input style="margin-left: 100px;" type="button" class="boton" value="Nuevo formulario" onclick="editarForm(false);" /> <a style="cursor:pointer;" class="ayuda"
			onclick="alert('En este menú puede configurar que campos obligatorios serán exigibles en cada formulario.\n\nDeberá indicar este nombre cuando invoque a la clase de validación en php.');"
		>[?]</a></span><br />
		<table width="100%" id="tablaForms" class="tablaNormal" cellspacing="0" border="0" align="center" cellmargin="0" style="padding: 25px 25px 0 0; color: #606060; font-size: 10pt; text-decoration: none; table-layout: fixed;">
			<thead>
				<tr class="cabeceraTabla" style="height: 30px;">
					<td style="padding-left: 5px;" width="60">Opc.</td>
					<td width="150">Nombre</td>
					<td align="center">Campos</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<!-- Div de edición y creación de nuevas reglas -->
		<div id="edicionRegla" class="dialog" style="display: none; background-color: #FBFBFB;">
			<form id="ruleEdition" action="">
				<table cellpadding="5" border="0" style="margin-left: 10px; width: 975px;;">
					<tbody id="ruleEditiontbody">
						<tr>
							<td align="right">Nombre de la regla:</td>
							<td colspan="3"><input type="text" id="ruleName" class="inputText_Std" style="width: 250px; margin-right: 5px;" maxlength="20" /> <a style="cursor:pointer;" class="ayuda" onclick="alert('Nombre que desea asignarle a esta regla sin espacios');">[?]</a></td>
						</tr>
						<tr>
							<td align="right">Expresión regular:</td>
							<td><input type="text" id="regExp" class="inputText_Std" style="width: 800px; margin-right: 5px;" maxlength="160" /> <a style="cursor:pointer;" class="ayuda"
								onclick="alert('Una expresión regular que deberá coincidir para que se valide correctamente.\nEn caso de no coincidencia se mostrarán los mensajes indicados más abajo.\n\nEj: ^\w{3}$ Coincidirá con 3 caracteres alfanuméricos y no con otra cosa');"
							>[?]</a></td>
						</tr>
						<tr>
							<td align="right">Mensajes:</td>
							<td><select class="inputText_Std" id="rulesMsg" style="height: 100px; width: 807px; margin-right: 5px;" multiple="" ondblclick="editarMensaje(this,'');"></select> <a style="cursor:pointer;" class="ayuda"
								onclick="alert('Mensajes de error para cada idioma que se mostrarán si no se cumple la regla.\nEl identificador de idioma debe coincidir con el que se le pasa a la función de validación.\nEn el caso de no haber ningún mensaje se seleccionará el mensaje designado en --default para esta opción.');"
							>[?]</a> <br /> <a style="cursor:pointer;" onclick="nuevoMensaje($('#rulesMsg'),'');" style="margin: 10px 0 0 710px; font-weight: bold;">[Nuevo mensaje]</a></td>
						</tr>
					</tbody>
				</table>
				<br /> <br /> <input type="button" class="boton" value="Guardar Regla" onclick="guardarRegla()" style="float: right;" /> <br /> <br />
			</form>
		</div>
		<!-- Div de edición y creación de nuevos campos -->
		<div id="edicionNombre" class="dialog" style="display: none; background-color: #FBFBFB;">
			<table cellpadding="5" border="0" style="margin-left: 10px; width: 95%;">
				<thead>
					<tr>
						<td align="right" width="150">Nombre del campo:</td>
						<td width="470"><input type="text" id="fieldName" class="inputText_Std" style="width: 425px; margin-right: 5px;" maxlength="30" title="Nombre del campo tal y como aparece en su atributo name" /> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Debe coincidir con el atributo name del campo que desea que se valide.\nCuando se valide un formulario este nombre será el que determine que validación aplicar a cada campo.');"
						>[?]</a></td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td align="right">Longitud mínima:</td>
						<td><input type="text" id="minLength" class="inputText_Std" style="width: 40px; margin-right: 15px;" maxlength="4" /> <span style="margin: 0 10px 0 10px;">Longitud máxima:</span><input type="text" id="maxLength" class="inputText_Std"
							style="width: 40px; margin-right: 5px;" maxlength="4"
						/> <a style="cursor:pointer;" class="ayuda" onclick="alert('Número mínimo y máximo de carcateres que deberá contener el campo para ser validado');">[?]</a></td>
						<td align="right" valign="top">Mensajes:</td>
						<td width="440"><select class="inputText_Std" id="lengthMessages" style="width: 415px; height: 22px;"></select> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Mensajes para cada idioma que se mostrarán cuando no se cumpla la regla de longitud mínima o máxima del campo.\nEn el caso de no haber ningún mensaje se seleccionará el mensaje designado en --default para esta opción.');"
						>[?]</a> <br /> <a style="cursor:pointer;" onclick="nuevoMensaje($('#lengthMessages'),'$1 será sustituido por longitud mínima y $2 por la máxima');" style="float: right; margin-right: 35px;">[Nuevo]</a><a style="cursor:pointer;"
							onclick="editarMensaje($('#lengthMessages'),'$1 será sustituido por longitud mínima y $2 por la máxima');" style="float: right; margin-right: 10px;"
						>[Editar]</a></td>
					</tr>
					<tr id="numericOptions">
						<td align="right">Numérico:</td>
						<td colspan="3"><input type="radio" name="numeric" id="numericYes" value="1" onclick="$('.numeric').show();" checked />Sí <input type="radio" name="numeric" id="numericNo" value="0" onclick="$('.numeric').hide();" />No &nbsp;&nbsp;&nbsp;<a
							style="cursor:pointer;" class="ayuda" onclick="alert('Indica si el campo deberá ser un número, si selecciona esta opción deberá indicar un valor máximo y mínimo.\nTenga en cuenta que no deben entrar en conflicto con la longitud.');"
						>[?]</a></td>
					</tr>
					<tr class="numeric">
						<td align="right">Valor mínimo:</td>
						<td><input type="text" id="minValue" class="inputText_Std" style="width: 90px; margin-right: 15px;" maxlength="10" /> <span style="margin: 0 10px 0 10px;">Valor máximo:</span><input type="text" id="maxValue" class="inputText_Std"
							style="width: 90px; margin-right: 5px;" maxlength="15"
						/> <a style="cursor:pointer;" class="ayuda" onclick="alert('Valores entre los que podrá oscilar el valor, si va a escribir decimales utilice . como separador');">[?]</a></td>
						<td align="right" valign="top">Mensajes:</td>
						<td><select class="inputText_Std" id="valueMessages" style="width: 415px; height: 22px;"></select> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Mensajes para cada idioma que se mostrarán cuando no se cumpla la regla de valor máximo o mínimo del campo.\nEn el caso de no haber ningún mensaje se seleccionará el mensaje designado en --default para esta opción.');"
						>[?]</a> <br /> <a style="cursor:pointer;" onclick="nuevoMensaje($('#valueMessages'),'$1 será sustituido por el valor mínimo y $2 por es máximo');" style="float: right; margin-right: 35px;">[Nuevo]</a><a style="cursor:pointer;"
							onclick="editarMensaje($('#valueMessages'),'$1 será sustituido por el valor mínimo y $2 por es máximo');" style="float: right; margin-right: 10px;"
						>[Editar]</a></td>
					</tr>
					<tr>
						<td align="right">Html width:</td>
						<td><input type="text" id="htmlWidth" class="inputText_Std" style="width: 60px; margin-right: 5px;" maxlength="6" /> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Anchura en px que se asignará al campo, si asigna un valor aquí el campo tendrá la anchura indicada independientemente de cualquier otra regla de estilo');"
						>[?]</a> <span style="margin: 0 5px 0 10px;">Clases:</span><input type="text" id="htmlClasses" class="inputText_Std" style="width: 280px;" maxlength="160" /> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('La clase o clases que indique aquí se le asignarán al campo, si escribe varias separelas por espacios');"
						>[?]</a></td>
						<td align="right">Validación remota:</td>
						<td><input type="radio" name="htmlRemote" id="htmlRemoteFocusOut" value="onfocusout" />onFocusOut <input type="radio" name="htmlRemote" id="htmlRemoteKeyUp" value="onkeyup" />onKeyUp <input type="radio" name="htmlRemote" id="htmlRemoteNo"
							value="0" checked
						/>No <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Indica si el campo deberá validarse remotamente y en que casos.\n\nOnKeyUp: Validará remotamente en cada pulsación de tecla\nOnFocusOut: Validará remotamente cuando se pierda el foco del elemento (Opc. recomendada)\nNone: No validará remotamente\n\nRecuerde que deberá configurar en el script de validaciones la url del script de validación remota.\nLos mensajes de error serán los devueltos por php.\nConsulte el manual para más información');"
						>[?]</a></td>
					</tr>
					<tr>
						<td align="right" valign="top">HTML requerido:</td>
						<td><input type="checkbox" id="htmlRequired"> <a style="cursor:pointer;" class="ayuda" onclick="alert('Indica que el campo deberá rellenarse obligatoriamente siempre y cuando este visible, si está oculto no se validará.');">[?]</a> <span
							style="margin: 0 10px 0 30px;"
						>Mensajes:</span> <select class="inputText_Std" id="requiredMessages" style="width: 296px; height: 22px;"></select> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Mensajes para cada idioma que se mostrarán cuando se deje en blanco un campo requerido en html.\nEn el caso de no haber ningún mensaje se seleccionará el mensaje designado en --default para esta opción.');"
						>[?]</a> <br /> <a style="cursor:pointer;" onclick="nuevoMensaje($('#requiredMessages'),'');" style="float: right; margin-right: 25px;">[Nuevo]</a><a style="cursor:pointer;" onclick="editarMensaje($('#requiredMessages'),'');" style="float: right; margin-right: 10px;">[Editar]</a></td>
						<td align="right">Función javascript:</td>
						<td><input type="text" name="jsFunction" id="jsFunction" class="inputText_Std" style="width: 405px;" maxlength="80" /> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Esta función javascript se utilizará para validar el campo de forma local, debe escribir sólo el nombre de funcion.\nDespués se llamará como nombrefuncion(valor_del_campo,idioma);\nEsta función deberá estar definida en jpfunctions.js y la ruta de dicho archivo configurada en opciones del script de validaciones js.');"
						>[?]</a></td>
					</tr>
					<tr>
						<td align="right" valign="top">PHP requerido:</td>
						<td><input type="checkbox" id="phpRequired"> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Indica que el campo nunca podrá estar vacío para que el formulario se valide.\nTenga en cuenta que si el campo está oculto y vacío pasaría la validación en html pero no en php.\n\nNOTA IMPORTANTE:Algunos campos como los checkbox no son enviados cuando no estan marcados, además de la posibilidad de eliminar campos antes del envio, si desea que realmente este campo sea obligatorio cree también una regla de formulario exigiendo este campo.');"
						>[?]</a> <span style="margin: 0 10px 0 30px;">Mensajes:</span> <select class="inputText_Std" id="phprequiredMessages" style="width: 296px; height: 22px;"></select> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Mensajes para cada idioma que se mostrarán cuando php detecte que este campo esta vacío\nEste error sólo se utilizará en php.\nEn el caso de no haber ningún mensaje se seleccionará el mensaje designado en --default para esta opción.');"
						>[?]</a> <br /> <a style="cursor:pointer;" onclick="nuevoMensaje($('#phprequiredMessages'),'');" style="float: right; margin-right: 25px;">[Nuevo]</a><a style="cursor:pointer;" onclick="editarMensaje($('#phprequiredMessages'),'');" style="float: right; margin-right: 10px;">[Editar]</a></td>
						<td align="right">Función php:</td>
						<td><input type="text" name="phpFunction" id="phpFunction" class="inputText_Std" style="width: 405px;" maxlength="80"
							title="Esta función se ejecutará ara validar los datos recibidos en php y para la validación remota del campo, consulte más información en el manual"
						/> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Esta función php se utilizará para validar el campo en php, debe escribir sólo el nombre de funcion.\nDespués se llamará como nombrefuncion(valor_del_campo,idioma);\nEsta función deberá estar definida en jpfunctions.php y la ruta de dicho archivo configurada en opciones del script de validaciones php.');"
						>[?]</a></td>
					</tr>
					<tr>
						<td align="right">Reglas a aplicar:</td>
						<td colspan="3">
							<div style="float: left; text-align: center;">
								<b>Reglas disponibles</b><br /> <select class="inputText_Std" style="height: 8em; width: 15em; margin-top: 1em;" id="currentRules" multiple="multiple"></select>
							</div>
							<div style="float: left; margin-left: 10px; padding-top: 45px;">
								<input class="boton" type="button" value="<<" style=" height: 35px; margin-left: 20px; min-width: 0px; margin-bottom: 15px;" onclick="moveRules($('#fieldRules'),$('#currentRules'));"><br> <input class="boton" type="button" value=">>"
									style="height: 35px; margin-left: 20px; min-width: 0px;" onclick="moveRules($('#currentRules'),$('#fieldRules'));"
								>
							</div>
							<div style="float: left; text-align: center; margin-left: 20px;">
								<b>Reglas aplicables a este campo: &nbsp;&nbsp;<a style="cursor:pointer;" class="ayuda" onclick="alert('Reglas que se aplicarán por orden descendente a la validación de este campo.');">[?]</a> <br /> <select class="inputText_Std"
									style="height: 8em; width: 15em; margin-top: 1em;" id="fieldRules" multiple="multiple"
								></select>
							</div>
							<div style="float: left; padding-top: 45px;">
								<input class="boton" type="button" value="Subir" style="height: 35px; margin-left: 20px; min-width: 0px; margin-bottom: 15px;" onclick="moveUpRule();"><br> <input class="boton" type="button" value="Bajar"
									style="height: 35px; margin-left: 20px; min-width: 0px;" onclick="moveDownRule();"
								>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<br /> <br /> <input type="button" class="boton" value="Guardar Nombre" onclick="guardarField()" style="float: right;" /> <br /> <br />
		</div>
		<!-- Div de edición y creación de nuevos formularios -->
		<div id="edicionFormulario" class="dialog" style="display: none; background-color: #FBFBFB;">
			<table cellpadding="5" border="0" style="margin-left: 10px; width: 975px;">
				<tbody id="ruleEditiontbody">
					<tr>
						<td align="right">Nombre del formulario:</td>
						<td colspan="3"><input type="text" id="formName" class="inputText_Std" style="width: 250px; margin-right: 5px;" maxlength="20" /> <a style="cursor:pointer;" class="ayuda"
							onclick="alert('Nombre que desea asignarle al formulario sin espacios, será el que deba llamar cuando instancie al validador en php');"
						>[?]</a></td>
					</tr>
					<tr>
						<td align="right">Campos obligatorios:</td>
						<td colspan="3">
							<div style="float: left; text-align: center;">
								<b>Campos disponibles</b><br /> <select class="inputText_Std" style="height: 16em; width: 16em; margin-top: 1em;" id="currentFields" multiple="multiple"></select>
							</div>
							<div style="float: left; margin-left: 10px; padding-top: 95px;">
								<input class="boton" type="button" value="<<" style=" height: 35px; margin-left: 20px; min-width: 0px; margin-bottom: 15px;" onclick="moveRules($('#formFields'),$('#currentFields'));"><br> <input class="boton" type="button" value=">>"
									style="height: 35px; margin-left: 20px; min-width: 0px;" onclick="moveRules($('#currentFields'),$('#formFields'));"
								>
							</div>
							<div style="float: left; text-align: center; margin-left: 20px;">
								<b>Campos obligatorios en este formulario: &nbsp;&nbsp;<a style="cursor:pointer;" class="ayuda" onclick="alert('Campos que deberán encontrarse obligatoriamente en el formulario para que pueda validarse.');">[?]</a> <br /> <select class="inputText_Std"
									style="height: 16em; width: 16em; margin-top: 1em;" id="formFields" multiple="multiple"
								></select>
							</div>
							<div style="float: left; padding-top: 95px;">
								<input class="boton" type="button" value="Subir" style="height: 35px; margin-left: 20px; min-width: 0px; margin-bottom: 15px;" onclick="moveUpField();"><br> <input class="boton" type="button" value="Bajar"
									style="height: 35px; margin-left: 20px; min-width: 0px;" onclick="moveDownField();"
								>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<br /> <br /> <input type="button" class="boton" value="Guardar Formulario" onclick="guardarFormulario()" style="float: right;" /> <br /> <br />
		</div>
		<form name="saveFile" id="saveFile" method="POST">
			<input type="button" class="boton" value="Generar fichero de reglas" onclick="generateFile();" style="float: right; margin: 20px; height: 30px;" /> <input type="hidden" id="jsonData" name="jsonData" value="" />
		</form>
	</div>
	<div style="margin: 20px; padding: 10px; clear: both; border-top: 1px solid #888;" align="center">
		<b style="text-shadow: 1px 1px 1px #888;">J&PValidator - Validador para php y jquery</b><br /> <br />Esta aplicación permite crear validaciones que se aplicarán tanto en jquery (cuando el usuario rellena los campos) como en php (cuando se reciba el
		formulario)<br />De esta forma creando un único fichero de reglas se validará en ambos entornos<br /> <br />Creado en noviembre 2012
	</div>
</body>
</html>